<template>
  <view class="container">
    <view class="header">
      <u-icon name="grid" color="#60a4f7" size="20" />
      <text class="header-title">温度 历史数据曲线</text>
    </view>

    <view class="card">
      <text class="empty-text" v-if="!chartStates.temp.hasData">暂无数据</text>
      <view class="chart-area">
        <view class="bars">
          <view
            v-for="(h, i) in chartStates.temp.barHeights"
            :key="i"
            class="bar"
            :style="{ height: h + 'rpx' }"
          ></view>
        </view>
        <view class="x-axis">
          <text v-for="(t, i) in xLabels" :key="i" class="x-label">{{
            t
          }}</text>
        </view>
      </view>
      <view class="range">
        <u-subsection
          :list="ranges"
          :current="chartStates.temp.currentRangeIndex"
          @change="onRangeChange('temp', $event)"
        />
      </view>
    </view>

    <view class="header">
      <u-icon name="grid" color="#60a4f7" size="20" />
      <text class="header-title">湿度 历史数据曲线</text>
    </view>

    <view class="card">
      <text class="empty-text" v-if="!chartStates.humidity.hasData">暂无数据</text>
      <view class="chart-area">
        <view class="bars">
          <view
            v-for="(h, i) in chartStates.humidity.barHeights"
            :key="i"
            class="bar"
            :style="{ height: h + 'rpx' }"
          ></view>
        </view>
        <view class="x-axis">
          <text v-for="(t, i) in xLabels" :key="i" class="x-label">{{
            t
          }}</text>
        </view>
      </view>
      <view class="range">
        <u-subsection
          :list="ranges"
          :current="chartStates.humidity.currentRangeIndex"
          @change="onRangeChange('humidity', $event)"
        />
      </view>
    </view>


    <view class="header">
      <u-icon name="grid" color="#60a4f7" size="20" />
      <text class="header-title">模拟量A1 历史数据曲线</text>
    </view>

    <view class="card">
      <text class="empty-text" v-if="!chartStates.ai1.hasData">暂无数据</text>
      <view class="chart-area">
        <view class="bars">
          <view
            v-for="(h, i) in chartStates.ai1.barHeights"
            :key="i"
            class="bar"
            :style="{ height: h + 'rpx' }"
          ></view>
        </view>
        <view class="x-axis">
          <text v-for="(t, i) in xLabels" :key="i" class="x-label">{{ t }}</text>
        </view>
      </view>
      <view class="range">
        <u-subsection :list="ranges" :current="chartStates.ai1.currentRangeIndex" @change="onRangeChange('ai1', $event)" />
      </view>
    </view>


    <view class="header">
      <u-icon name="grid" color="#60a4f7" size="20" />
      <text class="header-title">模拟量A2 历史数据曲线</text>
    </view>

    <view class="card">
      <text class="empty-text" v-if="!chartStates.ai2.hasData">暂无数据</text>
      <view class="chart-area">
        <view class="bars">
          <view
            v-for="(h, i) in chartStates.ai2.barHeights"
            :key="i"
            class="bar"
            :style="{ height: h + 'rpx' }"
          ></view>
        </view>
        <view class="x-axis">
          <text v-for="(t, i) in xLabels" :key="i" class="x-label">{{ t }}</text>
        </view>
      </view>
      <view class="range">
        <u-subsection :list="ranges" :current="chartStates.ai2.currentRangeIndex" @change="onRangeChange('ai2', $event)" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      metricTabs: [
        { name: "温度" },
        { name: "湿度" },
        { name: "模拟量A1" },
        { name: "模拟量A2" },
      ],
      currentMetricIndex: 0,
      ranges: ["日", "周", "月", "年"],
      xLabels: ["17:00", "21:00", "01:00", "05:00", "09:00", "13:00", "现在"],
      chartStates: {
        temp: { currentRangeIndex: 0, barHeights: [140, 140, 140, 140, 140, 140, 140], hasData: false },
        humidity: { currentRangeIndex: 0, barHeights: [140, 140, 140, 140, 140, 140, 140], hasData: false },
        ai1: { currentRangeIndex: 0, barHeights: [140, 140, 140, 140, 140, 140, 140], hasData: false },
        ai2: { currentRangeIndex: 0, barHeights: [140, 140, 140, 140, 140, 140, 140], hasData: false },
      },
    };
  },
  methods: {
    onMetricChange(idx) {
      this.currentMetricIndex = idx;
      this.loadData("temp");
      this.loadData("humidity");
      this.loadData("ai1");
      this.loadData("ai2");
    },
    onRangeChange(metric, idx) {
      this.chartStates[metric].currentRangeIndex = idx;
      this.loadData(metric);
    },
    loadData(metric) {
      this.chartStates[metric].hasData = false;
      this.chartStates[metric].barHeights = [140, 140, 140, 140, 140, 140, 140];
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
.container {
  height: 100%;
  background: #f6f7fb;
  padding: 16rpx 30rpx 30rpx;
}
.header {
  display: flex;
  align-items: center;
  gap: 10rpx;
  padding: 6rpx 2rpx 12rpx;
}
.header-title {
  font-size: 26rpx;
  color: #1e1f23;
}

.card {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}
.empty-text {
  font-size: 32rpx;
  color: #8b8d93;
  margin-bottom: 12rpx;
}
.chart-area {
  margin-top: 8rpx;
}
.bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 24rpx;
  align-items: end;
  height: 220rpx;
}
.bar {
  width: 12rpx;
  background: #dfe6f7;
  border-radius: 6rpx;
}
.x-axis {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 24rpx;
  margin-top: 12rpx;
}
.x-label {
  font-size: 22rpx;
  color: #8b8d93;
  text-align: center;
}
.range {
  margin-top: 16rpx;
}
.metric-tabs {
  margin-top: 18rpx;
}
</style>
